/**
 * bgSlides
 * 
 * a jQuery plugin to slide backgrounds
 * 
 * @author Zephyr <zephyr214@gmail.com>
 * 
 */
(function($){
	$.fn.bgSlides = function(options){
		//the defaults and user's options will mergered to opt, this is to keep from overriding defaults options
		var opt = $.extend({}, $.fn.bgSlides.defaults, options);
		
		//get current index (default to 0)
		var currentBg = opt.bgLiner.css('background-image').replace(/url\(\".+?(\/images\/.+)\"\)/i, '..$1');
		if (currentBg == opt.bgLiner.css('background-image')) return;
		$.fn.bgSlides.onIndex = getIndex(currentBg, opt);
		
		//bind event on triggers and do auto slide
		bindEvt(opt); 
		if (opt.isAutoSlide) {
			autoSlide(opt);
			if (opt.isStopOnHover) {
				opt.bgWrap.hover(
					function(){ clearInterval($.fn.bgSlides.intervalEv); },
					function(){ autoSlide(opt); }
				);
			}
		}
	};
	
	/** set default options **/
	$.fn.bgSlides.defaults = {
		triggers: $(),
		images: [],
		bgWrap: $(),
		bgLiner: $(),		
		evt: 'click',
		startIndex: 0, //the default index of the auto slide beginning
		isAutoSlide: true,
		isStopOnHover: true,
		speed: 500,
		interval: 1000,
		debug: false
	};	
	
	/** the animations **/
	$.fn.bgSlides.animate = function(opt, imgUrl) {
		opt.bgWrap.css('background-image', 'url(' +imgUrl+ ')');
		opt.bgLiner.fadeTo(opt.speed, '0', function(){
			opt.bgLiner.css('background-image', 'url(' +imgUrl+ ')');
			opt.bgLiner.fadeTo(opt.speed, '1');
		});
		$.fn.bgSlides.onIndex = getIndex(imgUrl, opt);		
	}
	
	/** background slide function **/
	var slideBg = function(opt, imgUrl) {
		if (opt.debug) {
			console.info('Current index: ' + $.fn.bgSlides.onIndex);
			console.info('Switch to background: ' + imgUrl);
		}
		
		//image preload
		var img = new Image();
		img.src = imgUrl;
		if (img.complete) {
			$.fn.bgSlides.animate(opt, imgUrl);
		} else {
			img.onload = function(){
				$.fn.bgSlides.animate(opt, imgUrl);
			}
		}
	};
	
	/** bind event on triggers **/
	var bindEvt = function(opt){
		opt.triggers.each(function(i){
			$(this).bind(opt.evt, function(){
				var onIndex = $.fn.bgSlides.onIndex; //onIndex - which index we are on
				var toIndex = i; //the index you want to switch to
				
				if (onIndex == toIndex || opt.bgLiner.is(':animated')) return false;				
				if (opt.isAutoSlide) clearInterval($.fn.bgSlides.intervalEv);
				slideBg(opt, opt.images[toIndex]);
				$(this).blur();
				return false;
				if (opt.isAutoSlide) autoSlide(opt);
			});
		});
	}
	
	/** auto slides **/
	var autoSlide = function(opt){
		var count = opt.triggers.length;
		$.fn.bgSlides.intervalEv = setInterval(function(){
			var i = $.fn.bgSlides.onIndex;
			i++;
			if (i >= count) i = opt.startIndex;
			slideBg(opt, opt.images[i]);
		}, opt.interval);
	};
	
	/** get index of an item in the images from options **/
	var getIndex = function(item, opt) {
		var i = $.inArray(item, opt.images);
		return i>=0 ? i : opt.startIndex;
	};
})(jQuery);